<template>
  <div class="">
    <el-upload v-loading="loading" element-loading-text="正在上传..." class="avatar-uploader" :action="data.action"
      :headers="data.headers" :show-file-list="false" :on-success="handleAvatarSuccess" :on-error="handleAvatarError"
      :data="{ imgType: props.imgType }" :before-upload="beforeAvatarUpload">
      <img v-if="props.imageUrl || props.img" :src="data.imageUrl || props.img" class="avatar" />
      <div v-else style="text-align: center;" class="avatar-uploader-icon">
        <!-- <el-icon style="margin-top: 40px;">
					<Plus />
				</el-icon> -->
        <p class="upImg">上传照片</p>
        <img class="ocr" src="../assets/ocr_red.png" />
      </div>
    </el-upload>
  </div>
</template>

<script setup>
// 使用规则父组件  最多 <Upload @onChang="onChangImage" :img="img" :max='2' updateMax='2' />
//               最简  <Upload @onChang="onChangImage"  />
//               onChangImage(e){ e//返回的数据 字符串或数组  }
//    img: '',//图片，类型字符串或者数组  'xxxx.png'||['xxx.png','xxx.jpg'] 不传默认字符串
//    max: '', //最大上传数量，多图需要，不传默认3；
//    updateMax:'' //最大上传大小 默认2 单位M 
//imgType 图片类型如下
// 	1-商户法人身份证人像面照片
// 	2-商户法人身份证国徽面照片
// 	3-手持身份证照片
// 	4-结算银行卡正面照
// 	5-结算银行卡反面照
// 	6-商户营业执照照片
// 	7-商户银行开户许可证照片
// 	8-门店门头照
// 	9-经营场所图1
// 	10-经营场所图2
// 	8-店内环境照片
// 	11-商户合同文件
// 	12-结算声明
// 	13-手写签名
// 	14-签约文件照片
// 	15-税务登记证
// 	16-收单业务商户协议
// 	17-互联网业务商户协议
// 	18-授权书
// 	19-收银台照
const emit = defineEmits(['onChang']);
let props = defineProps({
  img: '', //图片，类型字符串或者数组  'xxxx.png'||['xxx.png','xxx.jpg'] 不传默认字符串
  max: '', //最大上传数量，多图需要，不传默认3；
  imgType: "0",
  updateMax: '' //最大上传大小 默认2 单位M 
})
let loading = ref(false)
onMounted(() => {
  // 
  if (typeof (props.img) == 'object' && props.img != null) {
    var list = [];
    props.img.map(item => {
      if (item) list.push(item);
    })
    data.imgList = list;
    data.type = 2;
    if (props.max) {
      data.maxCount = Number(props.max);
    }
  } else {
    data.imageUrl = props.img;
    data.type = 1;
  }
  if (props.updateMax) {
    data.updateMax = props.updateMax;
  }

  data.headers = {
    sso_appCode: "SYS_MERCHANT",
    sso_token: localStorage.getItem('token')
  }
})
let data = reactive({
  imageUrl: "", //单图
  headers: {}, //请求头
  type: 1, //1单图 2是多图
  action: import.meta.env.VITE_API_BASEURL + "/merchant-pay/madmin/merchantPay/uploadImg", //域名
  imgList: [], //多图
  maxCount: 3,
  updateMax: 2,

})
const handleAvatarError = (e) => {

  loading.value = false;
};
const handleAvatarSuccess = (e) => {
  if (e.data) {
    data.imageUrl = e.data.modelUrl;
    emit("onChang", e.data);
    loading.value = false;
  }

}
const beforeAvatarUpload = (e) => {

  if (e.type !== 'image/jpeg' && e.type !== 'image/png') {
    ElMessage.error('上传格式错误!')
    return false
  } else if (e.size / 1024 / 1024 > data.updateMax) {
    ElMessage.error('上传图片不能大于' + data.updateMax + 'MB!')
    return false
  }
  loading.value = true;
  return true
}
</script>

<style scoped>
.avatar-uploader .avatar {
  width: 124px;
  height: 124px;
  display: block;
}
</style>

<style lang="scss" scoped>
.avatar-box {
  display: flex;
  align-items: center;

  .img-box {
    position: relative;

    .btn {
      position: absolute;
      position: absolute;
      z-index: 1;
      font-size: 20px;
      right: 10px;
      top: 10px;
      margin-top: -10px;
      color: #fff;
      z-index: 1;
    }
  }

  .avatar {
    margin-right: 10px;
  }

}

.avatar-uploader .el-upload {
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.04);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.avatar-uploader-icon {
  width: 124px;
  height: 124px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 2px;
  text-align: center;
  background: #fff url(../assets/Group1000006940.png) no-repeat center 25px;
  border: 1px dashed #ddd;
  position: relative;

  .ocr {
    position: absolute;
    right: 5px;
    top: 5px;
    display: none;
  }

  p.upImg {
    margin-top: 71px;
    color: #2E72E8;
  }
}

.idCardBlankUrl .avatar-uploader-icon {
  background: url(../assets/Group1000006940.png) no-repeat center 25px, url(../assets/Group1000006936.png) center 5px no-repeat;
}

.idCardFrontUrl .avatar-uploader-icon {
  background: url(../assets/Group1000006940.png) no-repeat center 25px, url(../assets/gh.png) center 5px no-repeat;
  background-size: auto, 130px;
}

.idCardBlankUrl .ocr {
  display: block;
}

.idCardFrontUrl .ocr {
  display: block;
}

.businessLicenseUrl .ocr {
  display: block;
}

.debitCardFrontUrl .ocr {
  display: block;
}
</style>
